﻿@model TaskManager.Models.AppointmentModel
@{
    Layout = null;
    var isEdit = (Model != null && Model.Id > 0);
}

<meta charset="UTF-8">
<link href="/Content/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <!-- Morris chart -->
    @*<link href="/Content/css/morris/morris.css" rel="stylesheet" type="text/css" />*@
    <!-- jvectormap -->
    <link href="/Content/css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
    <!-- Date Picker -->
    <link href="/Content/css/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
    <!-- Daterange picker -->
    <link href="/Content/css/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
    <!-- bootstrap wysihtml5 - text editor -->
    <link href="/Content/css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
    
    <!-- bootstrap data table -->
    <link href="/content/css/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />

    <!-- Theme style -->
    <link href="/Content/css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!-- Chosen style -->
<link href="/Content/chosen/chosen.css" rel="stylesheet" type="text/css" />


<div class="box box-primary">
    <div class="box-header">
        @if (isEdit)
        {
            <h3 class="box-title">Update event</h3>
        }
        else
        {
            <h3 class="box-title">Add event</h3>              
        }
    </div>
    <!-- /.box-header -->
    <!-- form start -->

    @using (Html.BeginForm(isEdit ? "Edit" : "Create"))
    {
        @Html.AntiForgeryToken()
        <div class="box-body">
            <div class="form-group">
                @if(ViewBag.Count != null && isEdit)
                {
                    <label>The number of people attending the event: @ViewBag.Count</label>    
                }
                
            </div>
            <div class="form-group">
                @Html.HiddenFor(m => m.Id)
                @Html.LabelFor(m => m.Title)
                @Html.TextBoxFor(m => m.Title, new { @class = "form-control" })
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.StartAndEndDate)
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </div>
                    @Html.TextBoxFor(m => m.StartAndEndDate, new { @class = "form-control pull-right" })
                </div>
                <!-- /.input group -->
            </div>

            <div class="form-group">
                @Html.LabelFor(m => m.Attendees)
                @Html.ListBoxFor(m => m.Attendees, new SelectList(ViewBag.Users, "Id", "FullName"), new { @class = "form-control" })
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Description)
                @Html.TextAreaFor(m => m.Description, new { @class = "form-control", rows = "5" })
            </div>
        </div>
        <div class="clear"></div>
        <!-- /.box-body -->
        <div class="box-footer">
            @if(!isEdit || (ViewBag.DisplaySave != null && ViewBag.DisplaySave))
            {
                <button class="btn btn-primary" type="button" id="btn-save">Save</button>    
            }
            
            @if(ViewBag.DisplayReject != null && ViewBag.DisplayReject)
            {
                <button class="btn btn-primary" type="button" id="btn-Reject">Reject</button>
                <button class="btn btn-primary" type="button" id="btn-Accept">Accept</button>  
            }
            
            @if (isEdit && (ViewBag.DisplaySave != null && ViewBag.DisplaySave))
            {
                <button class="btn btn-primary" type="button" id="btn-list-reject">List of rejecters</button>    
            }
            
            <button class="btn btn-primary" type="button" id="btn-cancel">Cancel</button>
        </div>
    }
</div>
<script src="/Content/js/jquery.min.js"></script>
<script src="/Content/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/Content/js/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<!-- datepicker -->
<script src="/Content/js/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/Content/js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
<script src="/Content/chosen/chosen.jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/Content/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="/Content/fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
    <link rel="stylesheet" type="text/css" href="/Content/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />

    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="/Content/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    <script type="text/javascript" src="/Content/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="/Content/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    <script type="text/javascript" src="/Content/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="/Content/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<script type="text/javascript">
    $(function () {
        // Datetime mask
        $('#StartAndEndDate').daterangepicker({ timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A' });
        
        // Chosen
        $('#Attendees').chosen();

        $('#btn-save').click(function () {
            var isCreate = ($("#Id").val() == 'undefined' || $("#Id").val() == '0' || $("#Id").val() == '');
            $.ajax({
                type: "POST",
                url: isCreate ? "@Url.Action("Create", "Appointment")" : "@Url.Action("Edit", "Appointment")",
                data: {
                    Id: isCreate ? 0 : $("#Id").val(),
                    Title: $("#Title").val(),
                    StartAndEndDate: $("#StartAndEndDate").val(),
                    AttendessStr: $("#Attendees").val().join(),
                    Description: $("#Description").val(),
                },
                success:function(reponse){
                    if (reponse.Result == 1) {
                        if (isCreate) {
                            window.parent.addEvent(reponse.Appointment);
                        } else {
                            window.parent.editEvent(reponse.Appointment);
                        }
                        window.parent.jQuery.fancybox.close();
                    } else {
                        alert(reponse.ErrorMsg);
                    }
                }
            });
        });
        
        $('#btn-cancel').click(function () {
            window.parent.jQuery.fancybox.close();
        });

        $('#btn-list-reject').click(function () {
            $.fancybox.open({
                href: '/appointment/ListOfComment/@Model.Id',
                type: 'iframe',
                padding: 0,
                'frameHeight': 200,
            });
        });
        
        $('#btn-Reject').click(function () {
            var reason = prompt("Please enter your reason");
            $.ajax({
                type: "POST",
                url: '/appointment/reject/',
                data: {
                    Comments: reason,
                    AppointmentId: @Model.Id
                },
                success: function (reponse) {
                    window.parent.deleteEvent(@Model.Id);
                    window.parent.jQuery.fancybox.close();
                }
            });
        });

        $('#btn-Accept').click(function() {
            $.ajax({
                type: "POST",
                url: "@Url.Action("Accept", "Appointment", new {id = Model.Id})",
                success: function(reponse) {
                    window.parent.jQuery.fancybox.close();
                }
            });
        });
    });
</script>

<style>
    .fancybox-inner {
        border-radius: 3px;
    }

    .chosen-container {
        width: 100% !important;
    }
</style>

